<template>
    <div>
        <div class="page-header">
            <p @click="toToplist">热门推荐</p>
            <i class="iconfont icon-icon-"></i>
            <router-link to="/discover/playlist">更多</router-link>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link iconfont icon-fenlei"></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                            @click.native="selectCat(item.name)"
                            v-for="(item,index) in classification" :key="index">
                        {{item.name}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <ul>
                <li v-for="(item,index) in classification"
                    :key="index"
                    @click="selectCat(item.name)">
                    {{item.name}}
                </li>
            </ul>
        </div>
        <div class="row" v-for="n in howToShow.rows" :key="n">
            <div class="col-xs-4 col-sm-3 col-md-3"
                 style="vertical-align: center"
                 v-for="(item,index) in howToShow.row[n-1]"
                 :key="index">
                <el-tooltip
                        :hide-after="2000"
                        class="item"
                        effect="dark"
                        :content="list?item.name:''"
                        placement="top">
                    <div class="thumbnail">
                        <router-link class="thumbnail" to="/sd">
                            <img :src="list?item.picUrl:''" :alt="list?item.name:''" @load="addLoadedCounter"/>
                            <div class="bottom" @click.self.prevent>
                                <span class="glyphicon glyphicon-headphones" @click.self.prevent></span>
                                <span class="listenCount" @click.self.prevent>{{item.playCount>=Math.pow(10,5)?Math.round(item.playCount/10000)+'万':item.playCount}}</span>
                                <span class="iconfont icon-play" @click.self.prevent="play"></span>
                            </div>
                        </router-link>

                        <div class="caption">
                            <p style="margin: 0px">{{item.name}}</p>
                        </div>
                    </div>
                </el-tooltip>

            </div>
        </div>
    </div>
</template>

<script>
    import musicApi from '@/request/musicApi';

    export default {
        name: "discover_toplist",
        data() {
            return {
                list: '',
                showNum: 8,
                numPerRow: document.body.clientWidth < 768 ? 3 : 4,
                showList: [],
                classification: [],
                howToShow: {},
            }
        }, methods: {
            toToplist() {
                this.$router.push({path: '/discover/toplist'});
            },
            selectCat(cat) {
                this.$router.push({path: '/discover/toplist?cat=' + cat});
            },
            play() {
                alert('play')
            },
            addLoadedCounter(){
                this.$store.commit('addLoadedCounter');
            }
        },
        created() {
            //获取热门歌单，渲染前八个
            musicApi.getPersonalized('/personalized', {})
                .then(res => {
                    if (res.data.code === 200) {
                        this.list = res.data.result;
                        for (let i = 0; i < this.showNum; i++) {
                            this.showList.push(this.list[i]);
                            this.$store.commit('addCounter');
                        }
                        this.$set(this.howToShow, 'rows', Math.ceil(this.showNum / this.numPerRow));
                        this.$set(this.howToShow, 'row', []);
                        for (let i = 0; i < this.howToShow.rows; i++) {
                            this.$set(this.howToShow.row, i, this.showList.slice(i * this.numPerRow, i * this.numPerRow + this.numPerRow));
                        }
                    }
                });
            //获取热门歌单分类，渲染前五个
            musicApi.getHotPlaylist('/playlist/hot', {})
                .then(res => {
                    if (res.data.code === 200) {
                        for (let i = 0; i < 5; i++) {
                            this.classification.push(res.data.tags[i]);
                        }
                    }
                });
        },
        mounted() {

        }
    }
</script>

<style lang="scss">
    @import "../assets/css/Thumbnails.css";
    @import "../assets/fonts/iconfont.css";

    .page-header {
        border-bottom: 2px red solid;
        position: relative;

        margin-bottom: 10px;
        p {
            padding-left: 35px;
            font-size: 20px;
            display: inline-block;
            width: auto;
            margin-bottom: 7px;
            cursor: pointer;
        }
        i {
            position: absolute;
            left: 5px;
            top: (57px-20px)/2;
            display: inline-block;
            font-size: 20px;
            color: #000;
        }
        .el-dropdown {
            display: none;
        }
        a {
            position: absolute;
            display: inline-block;
            bottom: 7px;
            right: 20px;
            color: #000;
            &:hover {
                color: #000;
                text-decoration: none;
            }
        }
        ul {
            padding-left: 10px;
            display: inline-block;
            margin: 0px;
            list-style: none;
            li {
                width: 50px;
                float: left;
                color: #9A9A9A;
                cursor: pointer;
                text-align: center;
                &:not(:last-child) {
                    border-right: 1px solid #9A9A9A;
                }
            }
        }
        @media (max-width: 767px) {
            ul {
                display: none;
            }
            .el-dropdown {
                margin-left: 10px;
                display: inline-block;
            }
        }
    }

    div.thumbnail {
        border: none;
        margin-bottom: 0px;
        a.thumbnail {
            position: relative;
            border: none;
            margin-bottom: 0px;
            padding: 0px;
            div.bottom {
                position: absolute;
                left: 0px;
                bottom: 0px;
                width: 100%;
                height: 25px;
                cursor: default;
                background: rgba(#000, 0.5);
                span {
                    font-size: 16px;
                    display: inline-block;
                    line-height: 25px;
                    color: #BCBDBC;
                }
                .glyphicon-headphones {
                    position: absolute;
                    left: 20px;
                    cursor: text;
                }
                .listenCount {
                    position: absolute;
                    left: 20px+20px;
                    cursor: text;
                }
                .icon-play {
                    position: absolute;
                    right: 10px;
                    cursor: pointer;
                }
                .icon-play:hover {
                    color: #fff;
                }
                @media(max-width: 767px) {
                    span {
                        font-size: 14px;
                        line-height: 25px;

                    }
                    .glyphicon-headphones {
                        position: absolute;
                        left: 5px;
                        cursor: text;
                    }
                    .listenCount {
                        position: absolute;
                        left: 5px+20px;
                        cursor: text;
                    }
                    .icon-play {
                        position: absolute;
                        right: 5px;
                        cursor: pointer;
                    }
                }

            }

        }
    }

    div.caption {
        padding: 0px;
        p {
            font-size: 14px;
        }
    }
</style>